<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<style>
			/* 1.抓到图片元素 */
			img{
				animation: dfc 1s linear infinite;
				
			}
			/* 2.在图片上进行旋转 */
			@keyframes dfc{
							
							0%{
								transform: rotate(100deg) 
							}
							30%{
								transform: rotate(300deg) 
							}
							100%{
								transform: rotate(800deg) 
							}
						}
		</style>
	</head>
	<body>
		<!-- 音视频参考图片写法 video audio
		html5针对属性和属性值的一致情况：省去属性值
		autoplay属性 自动播放一次
		controls属性 播放条
		loop属性  无限次播放
		 
		 -->
		<v ideo src="img/oceans-clip.mp4" autoplay controls></video>
		<audio src="img/dafengche.mp3" autoplay  loop></audio>
		<img src="img/dfc.jpg" alt="大风车"  />
		
		<h1>锚点技术</h1>
		<!-- 锚点具备三要素：1.定义锚点2.锚点距离3.锚点位 -->
		<!-- 1.定义锚点 -->
		<a href="#abc">人</a>
		<!-- 2.锚点距离 填充页面高度 -->
		<div style="height:1000px;"></div>
		<!-- 3.锚点位    超链接name传参属性：【将前台数据传输后台】
		                 属性值：自定
		 -->
		 
		 <a name="abc"><img src="img/灰太狼.png"/a>
	</body>
</html>